<style>
  .desktop-button{
    width: 100%;
    height: 100px;
    border: none;
  }
  .image-box{
    width: 70px;
    height: 70px;
    padding-top: 3px;
    padding-left: 10px;
  }
  .desktop-icon{
    width: 70px;
    height: 70px;
  }
  .icon-name{
    width: 90px;
    height: 27px;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
    color: #fff;
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  .icon-choose{
    background-color: rgba(0, 134, 255, 0.20);
  }
  .pre-choose{
    background-color: rgba(0, 134, 255, 0.30);
  }
</style>

<template>
  <div class="desktop-button" :class="{'icon-choose': choose, 'pre-choose': select}"
       @mousedown.stop="mouse_down" @mouseup.stop="mouse_up" @mousemove.stop="mouse_move"
       @mouseenter.stop="mouse_enter" @mouseleave.stop="mouse_leave">
    <div class="image-box">
      <div class="desktop-icon" :style="icon_image"></div>
    </div>

    <div class="icon-name">{{name}}</div>
  </div>
</template>

<script>
  export default {
    name: 'home',

    data () {
      return {
        select: false,
        click: {time: 0, button: 0}
      }
    },

    props: {
      id: {type: Number, default: 0},
      icon: { type: String, default: '' },
      name: { type: String, default: '' },
      url: { type: String, default: '' },
      choose: {type: Boolean, default: false}
    },

    computed: {
      icon_choose(){
        return this.choose
      },
      icon_style(){
        if(this.icon_choose){
          return {'background-color': 'rgba(0, 134, 255, 0.27)'}
        }else{
          return {'background-color': 'rgba(0, 0, 0, 0)'}
        }
      },
      icon_image(){
        return {'background-image': 'url(' + this.icon + ')', 'background-size': 'cover'}
      }
    },

    methods: {
      app_choose: function () {
        this.$emit('choose');
      },
      mouse_down: function () {

      },
      mouse_move: function () {

      },
      mouse_up: function () {
        let time = new Date().getTime();
        if(this.click.time === 0){
          this.click.time = time;
        }else{
          let delta = time - this.click.time;
          if(delta < 1000){
            console.log('child double click. time = ' + delta);
          }
          this.click.time = 0;
        }
      },
      mouse_enter: function(){
        this.select = true;
      },
      mouse_leave: function () {
        this.select = false;
      },
    }
  }
</script>
